<template>
  <view class="container">
    <uni-section
      v-for="(item1, index1) in list"
      :key="index1"
      :title="item1.title"
      type="line"
    >
      <uni-card :is-shadow="false">
        <view class="ul">
          <view
            v-for="(item2, index2) in item1.children"
            :key="index2"
            class="li"
            @click="pushHandle(item2)"
            >{{ item2.title }}</view
          >
        </view>
      </uni-card>
    </uni-section>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { useComputeStore } from '@/store'

const computeStore = useComputeStore()

const list = ref<Array<TopicObj>>([
  {
    title: '加减法',
    mode: '加减法',
    children: [
      {
        title: '多位数减法',
        type: '多位数减法',
        generateTopic: () => {
          const num1 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100 // 生成100到1000之间的随机数
          const num2 = Math.floor(Math.random() * num1) // 生成小于或等于num1的随机数
          return {
            topic: `${num1} - ${num2} = ?`,
            answer: num1 - num2,
            ok: false,
          }
        },
      },
      {
        title: '多位数加法',
        type: '多位数加法',
        generateTopic: () => {
          const num1 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
          const num2 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
          const num3 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
          return {
            topic: `${num1} + ${num2} + ${num3} = ?`,
            answer: num1 + num2 + num3,
            ok: false,
          }
        },
      },
    ],
  },
  {
    title: '乘法',
    mode: '乘法',
    children: [
      {
        title: '两位乘一位',
        type: '两位乘一位',
        generateTopic: () => {
          const num1 = Math.floor(Math.random() * (99 - 10 + 1)) + 10
          const num2 = Math.floor(Math.random() * (9 - 1 + 1)) + 1
          return {
            topic: `${num1} * ${num2} = ?`,
            answer: num1 * num2,
            ok: false,
          }
        },
      },
      {
        title: '两位乘两位',
        type: '两位乘两位',
        generateTopic: () => {
          const num1 = Math.floor(Math.random() * (99 - 10 + 1)) + 10
          const num2 = Math.floor(Math.random() * (99 - 10 + 1)) + 10
          return {
            topic: `${num1} * ${num2} = ?`,
            answer: num1 * num2,
            ok: false,
          }
        },
      },
      {
        title: '三位乘一位',
        type: '三位乘一位',
        generateTopic: () => {
          const num1 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
          const num2 = Math.floor(Math.random() * (9 - 1 + 1)) + 1
          return {
            topic: `${num1} * ${num2} = ?`,
            answer: num1 * num2,
            ok: false,
          }
        },
      },
      {
        title: '三位乘三位',
        type: '三位乘三位',
        generateTopic: () => {
          const num1 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
          const num2 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
          return {
            topic: `${num1} * ${num2} = ?`,
            answer: num1 * num2,
            ok: false,
          }
        },
      },
    ],
  },
  {
    title: '除法',
    mode: '除法',
    children: [
      {
        title: '三位除一位',
        type: '三位除一位',
        deviation: 0.03,
        generateTopic: () => {
          const num1 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
          const num2 = Math.floor(Math.random() * (9 - 1 + 1)) + 1
          return {
            topic: `${num1} / ${num2} = ?`,
            answer: num1 / num2,
            ok: false,
          }
        },
      },
      {
        title: '三位除三位',
        type: '三位除三位',
        deviation: 0.04,
        generateTopic: () => {
          const num1 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
          const num2 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
          return {
            topic: `${num1} / ${num2} = ?`,
            answer: (num1 / num2).toFixed(2),
            ok: false,
          }
        },
      },
    ],
  },
])

const pushHandle = (item: TopicObjChildren) => {
  console.log(item, '999999999')
  computeStore.topic.config = item
  uni.navigateTo({
    url: `/pages/compute/compute-detail`,
  })
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: auto;

  .ul {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .li {
      width: 45%;
      height: 100rpx;
      background-color: #057fd7;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      border-radius: 10px;
      margin: 10rpx 0;
    }
  }
}
</style>
